<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select name="" id="province">
        <option value="">省</option>
    </select>
    <select name="" id="city">
        <option value="">市</option>
    </select>
    <select name="" id="area">
        <option value="">区县</option>
    </select>


    <script>
        let province = document.querySelector('#province');
        let city = document.querySelector('#city');
        let area = document.querySelector('#area');

        fetch('./city.json').then(function(response) {
            return response.json();
        }).then(function(data) {
            // console.log(data); //获取到json

            //遍历省
            for (let k in data) {
                // console.log(k); //所有省

                //1.得到省
                province.innerHTML += ` <option value="${k}">${k}</option>`;


                // for (let c in data[k]) {
                //     console.log(c); //所有的市
                //     city.innerHTML += `<option value="">${c}</option>`



                //     // 3.得到区县
                //     // console.log(typeof data[k][c]); //object
                //     // console.log(data[k][c]); //各县区的数组集合 
                //     data[k][c].forEach(function(item) {
                //         // console.log(item); //所有县区
                //         area.innerHTML += `<option value="">${item}</option>`
                //     })
                // }


            }

            // console.log(province); //得到省的select下拉列
            // console.log(province.selectedIndex);

            //2.点击省的时候得到市
            province.onchange = function() {
                city.innerHTML = `<option value="">城市</option>`;
                area.innerHTML = `<option value="">区县</option>`;
                // console.log(city);

                for (let key in data) {
                    // console.log(data[key]);//{北京: Array(19)}
                    // console.log(key);//所有省
                    // console.log(province.value); //北京

                    if (key == province.value) {
                        for (let key1 in data[key]) {
                            city.innerHTML += `<option value="${key1}">${key1}</option>`;
                        }
                    }
                }
            };


            //区县
            city.addEventListener("change", function() {
                area.innerHTML = `<option value="">区县</option>`;
                for (let key in data) {
                    if (key == province.value) {

                        for (let key1 in data[key]) {
                            if (key1 == city.value) {

                                console.log(data[key][key1]); //所有区县的数组
                                for (let key2 in data[key][key1]) {
                                    area.innerHTML += `<option value="${data[key][key1][key2]}">${data[key][key1][key2]}</option>`;
                                }
                            }
                        }
                    }
                }
            });


        }).catch(function(error) {
            console.log(error);
        })
    </script>
</body>

</html>